import * as React from 'react'
import _ from 'lodash'
import {renderItems, VJsonComponent, render, VJsonComponentBase,} from "../factory"
import {PageHeader, Row, Col, Button} from "antd"
import '../css/page.css'
import {CSSProperties} from "react";
import {toJS} from "mobx";
import {apply} from "..";
import {forEach} from "ag-grid-community/dist/lib/utils/array";
import drawer from "./drawer";

export interface PageVJsonProp {
    /**
     * 标题
     */
    title?: string;

    /**
     * 副标题
     */
    subTitle?: string;

    /**
     * 标题栏高度
     */
    headHeight?: string;

    /**
     * body 样式
     */
    bodyStyle: CSSProperties

    /**
     * css 类名
     */
    className?: any

    /**
     * 内容元素
     */
    items: any[]

    /**
     * 脚部内容
     */
    footer: any[]

    /**
     * 工具栏
     */
    toolbar: any[]

    /**
     * 抽屉
     */
    drawerList: any[]
}

export interface PageState {

}

@VJsonComponent({
    view: 'page'
})
export default class Page extends VJsonComponentBase<PageVJsonProp, PageState> {
    static defaultProps: Partial<PageVJsonProp> = {
        title: '',
        subTitle: '',
        headHeight: '',
        toolbar: [],
        drawerList: []
    };

    constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Page.defaultProps
        )
    }

    debugToolClick = () => {//数据
        const scope = this.props.$context.scopeInstance
        //@ts-ignore
        window.debugTool.openDebug(scope)
    }

    // addDrawer(vJson) {
    //     this.props.vjson.drawerList.push(vJson);
    // }

    render(): any {

        const {headHeight, title, subTitle, items, footer, toolbar} = this.props.vjson


        return (
            //@ts-ignore
            <div className={"page-wrap " + _.trim(apply(this, this.props.vjson.className))} key={this.key} view_id={this.key} aria-roledescription={this.view}>
                <div className="page-wrap-header" style={{height: headHeight}}>
                    {
                        (!!title) ?
                            <PageHeader
                                title={apply(this, title)}
                                subTitle={apply(this, subTitle)}
                            /> : null
                    }
                    <div className="page-wrap-header-right">
                        {
                            (_.has(window, 'debugTool') ? <Button onClick={this.debugToolClick}>调试</Button> : null)
                        }
                        {
                            ...renderItems(this, toolbar)
                        }
                    </div>
                </div>
                <div className="page-wrap-body" style={toJS(this.props.vjson.bodyStyle)}>
                    {
                        ...renderItems(this, items)
                    }
                </div>
                {
                    (footer && footer.length > 0) ? (
                        <div className="page-wrap-footer">
                            {
                                render(this, {view: 'toolbar', items: footer})
                            }
                        </div>
                    ) : null
                }
                <div role={"drawer"} className={"drawer-list"} id={this.key+"_"+"drawer"}/>
            </div>
        );
    }

}
